<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '系统设置',
  },
}
</route>

<template>
  <view class="system">
    <view class="system-conent">
      <view class="item">
        <view class="item-title">关于我们</view>
        <view><view class="iconfont tabbar-youjiantou item-icon"></view></view>
      </view>
      <view class="item">
        <view class="item-title">协议与隐私政策</view>
        <view><view class="iconfont tabbar-youjiantou item-icon"></view></view>
      </view>
      <view class="item" @click="handleLogout">
        <view class="item-title">退出登录</view>
        <view><view class="iconfont tabbar-youjiantou item-icon"></view></view>
      </view>
      <view class="item">
        <view class="item-title">当前版本</view>
        <view class="item-right">v1.0.0</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 执行登出操作
        userStore.clearUserInfo()

        // 跳转到登录页
        uni.reLaunch({ url: '/pages/login/index' })

        // 可选：清除其他本地缓存
        uni.clearStorageSync()
      }
    },
  })
}
</script>

<style lang="scss" scoped>
//
.system {
  width: 750rpx;
  .system-conent {
    box-sizing: border-box;
    width: 700rpx;
    padding: 30rpx 20rpx;
    margin: 25rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      .item-title {
        font-size: 24rpx;
        color: #000;
      }
      .item-right {
        font-size: 20rpx;
        color: #999;
      }
      .item-icon {
        font-size: 18rpx;
        color: #999;
      }
      &::after {
        position: absolute;

        right: 0;
        bottom: 0rpx;
        left: 0;
        content: '';
        // background-color: #000;
        border-color: #e5e5e5;
        border-top-style: solid;
        border-top-width: 1px;
        transform: scaleY(0.5) translateZ(0);
      }
      &:last-child::after {
        display: none;
      }
    }

    .logout-box {
      padding: 0 20rpx;
      margin-top: 40rpx;

      .logout-btn {
        height: 80rpx;
        font-size: 28rpx;
        line-height: 80rpx;
        color: #ff4444;
        text-align: center;
        background-color: #fff;
        border: 1rpx solid #eee;
        border-radius: 12rpx;

        &:active {
          background-color: #f8f8f8;
        }
      }
    }
  }
}
</style>
